<template>
<!--  MVVM模式Model-View-ViewModel-->
<!--  其中 ViewModel指的就是vue 实例-->
<!--  包括-->
<!--  DOM Listeners DOM监听-->
<!--  Data Bindings 数据绑定-->
<!--  从而实现数据双向绑定-->
<!--  View 指的是视图 就是模板-->
  <div>
    {{msg}}
    <br/>
    <input type="text" v-model="msg">
   <br/>
    {{num}}
    <br/>
    <button @click="sub">-</button>
    <input type="text" v-model="num">
    <button @click="add">+</button>
  </div>
</template>

<script>
const data = {
  msg:'this is test',
  min:1,
  max:10,
  num:0
}
export default {
  /*MVVM模式Model-View-ViewModel
   * 其中 ViewModel指的就是vue 实例
   * 包括
   * DOM Listeners DOM监听
   * Data Bindings 数据绑定
   * 从而实现数据双向绑定
   * View 指的是视图 就是模板里面的数据
   * Model 就是指的业务逻辑
  */
  name: "App",
  data(){
    return data
  },
  methods:{
    add(){
      if(this.num >= this.max){
        this.num = this.max
      }else{
        this.num++
      }
    },
    sub(){
      if(this.num <= this.min){
        this.num = this.min
      }else{
        this.num--
      }
    }
  }
}
</script>

<style scoped>

</style>